<template>
    <view class="container">
        <block v-if="!isSuccess">
            <view class="form">
                <view class="form-item">
                    <u-input
                        border="none"
                        placeholder="请填写真实姓名"
                        fontSize="28rpx"
                        v-model="name"
                        placeholderClass="input-placeholder"
                    ></u-input>
                </view>
                <view class="form-item">
                    <u-input
                        border="none"
                        placeholder="请填写正确的身份证号码"
                        fontSize="28rpx"
                        v-model="idcard"
                        placeholderClass="input-placeholder"
                    ></u-input>
                </view>
                <view class="form-item">
                    <u-input
                        border="none"
                        placeholder="请填写手机号"
                        fontSize="28rpx"
                        :value="mobile"
                        disabled
                        disabledColor="#ffffff"
                        placeholderClass="input-placeholder"
                    ></u-input>
                </view>
                <view class="form-item">
                    <u-input
                        :placeholder="'请输入手机验证码'"
                        border="none"
                        type="number"
                        fontSize="28rpx"
                        color="#000000"
                        v-model="code"
                        :customStyle="{
                            margin: '40rpx 0 0 0',
                            borderRadius: '4rpx',
                            fontWeight: 400
                        }"
                    >
                        <template slot="suffix">
                            <u-code
                                ref="uCode"
                                @change="codeChange"
                                changeText="重新发送(Xs)"
                                keep-running
                                @end="end"
                            ></u-code>
                            <u-text
                                :text="tips"
                                @click="getCode"
                                size="24rpx"
                                :color="disenble? '#9DA1AD':'#27334E'"
                            >
                            </u-text>
                        </template>
                    </u-input>
                </view>
            </view>
            <view class="bottom">
                <u-button
                    text="立即认证"
                    class="custom-style"
                    :customStyle="{
                        background: '#000000',
                        color: '#ffffff',
                        height: '90rpx',
                        fontSize: '30rpx'
                    }"
                    :throttleTime="1500"
                    @click="onsubmit"
                ></u-button>
            </view>
        </block>
        <block v-else>
            <view class="icon">
                <u-icon
                    name="https://img.ionepin.com/171b365f1581c52a57ecd47ba9d5b128a4ac6697.png"
                    width="128rpx"
                    height="128rpx"
                ></u-icon>
            </view>
            <u-text
                text="认证成功"
                size="38rpx"
                margin="70rpx 0 0 0"
                block
                align="center"
            ></u-text>
        </block>
        <u-popup
            :show="popupShow"
            mode="center"
            @close="popupShow = false"
            :customStyle="{
                width: '620rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                :p_type="'verifyCode'"
                @confirm="captchaConfirm"
                :extData="extData"
            ></popup-context>
        </u-popup>
    </view>
</template>

<script>
    import { realApi } from "@/config/api-java"
    import PopupContext from "@/components/PopupContext"
    export default {
        components: {
            PopupContext
        },
        data() {
            return {
                idcard: null,
                name: null,
                isSuccess: false,
                popupShow: false,
                disenble: false,
                tips: "发送验证码",
                code: null,
                extData: null
            }
        },
        computed: {
            mobile() {
                return this.$store.getters.mobile
            }
        },
        methods: {
            async onsubmit() {
                const res = await realApi({ realIdCard: this.idcard, realName: this.name, code: this.code})
                this.isSuccess = true
                this.$store.dispatch("user/setIdentify", {identify: 1, realIdCard: this.idcard, realName: this.name})
            },
            codeChange(text) {
                this.tips = text
            },
            end() {
                this.disenble = false
            },
            getCode() {
                if (this.disenble) {
                    return
                }
                this.extData = {
                    mobile: this.$store.getters.mobile
                }
                this.popupShow = true
            },
            captchaConfirm() {
                this.$refs.uCode.start();
                this.disenble = true
                this.popupShow = false
                this.$u.toast('验证码获取成功')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .form {
            padding: 15rpx 30rpx 0 30rpx;
            .form-item {
                padding-top: 40rpx;
                padding-bottom: 30rpx;
                border-bottom: 1rpx solid #EEEEEE;
                .input-placeholder {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }
        .bottom {
            box-sizing: border-box;
            width: 100%;
            position: fixed;
            bottom: 33rpx;
            padding: 0 20rpx;
        }
        .icon {
            padding-top: 176rpx;
            width: 128rpx;
            height: 128rpx;
            margin: 0 auto;
        }
    }
</style>
